<template>
	<view class="repair-wrap">
		<view>
			<view
				style="border-top: 1px solid #c4c4c4 ;border-bottom: 1px solid #c4c4c4 ;background: #fff;padding: 10px 0;font-size: 17px;">
				<picker :value="indexe" @change="typeBtn" :range="typaBtne" range-key="name" mode="selector"
					style="width: 83px;margin: auto;">
					<view class="form-select">{{typaBtne[indexe].name}}</view>
				</picker>
			</view>

			<view class="repair-box u-p-20">
				<view style="text-align: center;">
					{{yearData.startTime}}~{{yearData.endTime}}
				</view>
			</view>
			<view class="repair-box u-p-40 u-p-l-30 u-p-r-30" style="margin-top: -22px;" v-if="isShowThree">
				<!-- #0000001A -->

				<view style="text-align: center;font-weight: 600;font-size: 18px;">{{this.homelist.proName}}</view>

				<view @click="moneyShow = true"
					style="text-align: center;font-size: 15px;color: #007aff;margin-top: 10px;border-bottom: 1px solid #ddd;">
					截止目前该小区物业费
					<view style="color: #000;margin-top: 2px;padding-bottom: 7px;">
						余额 <span
							:style="yearData.propertyInfo.totalBalance >0 ? 'color:#F9A832;font-size:20px;padding:0 5px' : yearData.propertyInfo.totalBalance < 0 ? 'color:red;font-size:20px' : ''">{{yearData.propertyInfo.totalBalance | moneyFormat}}</span>
						元
					</view>
				</view>
				<view class="box_one">
					<view>已缴<br>
						<view class="box_onetext">{{yearData.paidNumber}} <span style="margin-left: 2px;">户</span>
						</view>
					</view>
					<view>已缴<br>
						<view class="box_onetext" style="color: #FF9700;">{{yearData.paidProportion}}%</view>
					</view>
					<view>未缴<br>
						<view class="box_onetext">{{yearData.unpaidNumber}}<span style="margin-left: 2px;">户</span>
						</view>
					</view>
					<view>未缴<br>
						<view class="box_onetext" style="color: #ec1212;">{{yearData.unpaidProportion}}%</view>
					</view>
				</view>

			</view>
			<view class="nav_item" v-for="(item,index) in yearData.cdoList">
				<view style="display:flex;align-items: center;">
					<view class="nav_itemtitle">
						<image class="top-logo" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/issue.png"></image>
						{{item.build_district_code}}<span style="color:#333">（区/期）</span>
					</view>
				</view>

				<view class="nav_itemBox">
					<view style="padding: 10px 0;">
						<view>
							<view v-for="(items,indexs) in item.BuildingList">
								<view class="nav_itemBuilding" @click="getTower(items,index,indexs,3)">
									<view>
										<span style="font-size: 16px;"> {{items.build_tower_code}}号楼</span><span
											style="color: #999;display:inline-block;width:200px">
											（共<span
												style="color: #FF9700;padding: 0 2px;">{{items.roomNum}}</span>户，已缴<span
												style="color: #FF9700;padding: 0 2px;">
												{{items.paidNumber}}</span>户）</span>
									</view>
									<view>
										<image class="image" v-if="!items.status"
											src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png"></image>
										<image class="unit_image" v-if="items.status" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png">
										</image>
									</view>


								</view>
								<view v-if="items.status">
									<view v-if="items.status" v-for="(items1,indexs1) in items.towerData">
										<view class="unit" @click="getUnit(items1,indexs1,index,indexs)">
											{{items1.room_unit_number}}单元（共{{items1.roomNum}}户，已缴{{items1.paidNumber}}户）
											<image class="image" v-if="!items1.status3"
												src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png"></image>
											<image class="unit_image" v-if="items1.status3"
												src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png"></image>
										</view>
										<view v-if="items1.status3">
											<view class="from_box">
												<view class="from_boxtelete"><span style="color: #000000;">说明：</span>
													<span style="color: #999;">
														<span
															style="background-color:rgb(209 255 209 / 48%);padding: 4px 1px;">绿底</span>
														为已缴纳物业费房间
													</span>
												</view>
												<view class="tab">
													<view
														style="margin-top: -10px;display: flex;justify-content: space-between;">
														<view>房间号</view>
														<view>缴费截止时间</view>
													</view>
													<view v-if="items1.status3"
														v-for="(items2,indexs2) in items1.roomData">
														<view class="tab_box"
															:style="items2.paid == true ? 'background: rgb(209 255 209 / 28%)' : 'background:#fff'">
															<!-- // padding: 5px 10px; -->
															<view
																style="padding:5px 0 5px 10px;width: 50%; border-right: 2rpx solid #ccc; ">
																{{items2.room_code}}(室)
															</view>

															<view
																style="padding:5px 10px 5px 0;width: 50%; display: flex;justify-content: end; ">
																{{items2.endTime.split(' ')[0]}}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


			<view class="modal" v-if="moneyShow">
				<view class="modal-cont">
					<view class="imageBack"></view>
					<view>
						<view style="position: absolute;top: 21px;left: 77px;font-size: 18px; font-weight: 600;">
							物业费资金储存状况</view>
						<view class="wyfBalance">
							<view style="padding: 10px 20px;">
								<view style="color: #fff;text-align: center">截止目前该小区物业费</view>
								<view style="padding-top: 15px;color: #fff;">
									<view style="text-align: center;">余额
										<view style="color: #fff;font-size: 20px;font-weight: 500;color: orange;">
											{{yearData.propertyInfo.totalBalance|moneyFormat}}<span
												style="font-size: 13px;margin-left: 3px;color: #fff;">元</span>
										</view>
									</view>

								</view>
							</view>
							<view style="margin-top: -67px;text-align: right;">
								<image style="width: 70px;height: 70px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/wyf.png" mode="">
								</image>
							</view>
						</view>
					</view>

					<view class="image_Tow">
						<view style="padding: 40px 20px 0px 20px;">
							<view style="display: flex;">
								<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/public.png" mode="">
								</image>
								<view style="color: #999;margin-left: 12px;">
									对公账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
										{{yearData.propertyInfo.publicBalance|moneyFormat}}<span
											style="font-size: 13px;margin-left: 3px;">元</span>
									</view>
								</view>
							</view>
							<view style="margin-top: 10px;color: #999;">
								<span>说明：扫码(对公账户)/支票/对公账户</span>
							</view>
							<view style="display: flex;margin-top: 20px;">
								<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/cash.png" mode="">
								</image>
								<view style="color: #999;margin-left: 12px;">
									对私账户<view style="font-size: 18px;color: #000000;font-weight: 550;">
										{{yearData.propertyInfo.cashBalance|moneyFormat}}<span
											style="font-size: 13px;margin-left: 3px;">元</span>
									</view>
								</view>
							</view>
							<view style="margin-top: 10px;color: #999;">
								<span>说明：扫码(对私账户)/现金/银行卡/对私账户</span>
							</view>
						</view>
					</view>

					<view class="modal-bottom">
						<view class="meeting-btn" @click="moneyShow = false">关闭</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: false,
				status3: false,
				yearData: {},
				ruleFrom: {
					room_id: null, //房间号
					years: 0, // -1:上一年度 0:本年度 1:下一年度
					type: 1, //1:获取项目信息  2:获取楼号  3:获取单元号  4:获取房间号
					build_district_code: null, //期号
					build_tower_code: null, //楼号
					room_unit_number: null, //单元号

				},
				//选择年度
				indexe: 0,
				typaBtne: [{
						id: 0,
						name: '本年度'
					},
					{
						id: -1,
						name: '上年度'
					},
					{
						id: 1,
						name: '下年度'
					}
				],
				state: false,
				districtData: [],
				towerData: [],
				roomData: [],
				moneyShow: false,
				isShowThree: false
			}
		},
		async onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
			this.getPayList()
		},
		filters: {
			//取截单元,单位  zwl 2022-11-1
			moneyFormat: function(num) {
				if (num == null || num == '') {
					return 0
				}
				let arg = parseInt(num)
				if (arg.toString().length >= 13) {
					const moneys = arg / 1000000000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万亿"

				} else if (arg.toString().length >= 9) {
					const moneys = arg / 100000000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "亿"
				} else if (arg.toString().length >= 5) {
					const moneys = arg / 10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal + "万"
				} else {
					return num
				}
			}
		},

		methods: {
			//获取年度数据
			getPayList() {
				uni.showLoading({
					title: "计算量较大,拼命加载中..."
				})
				this.$request.api.yearPayData({
					room_id: this.homelist.roomId,
					years: this.ruleFrom.years,
					type: this.ruleFrom.type
				}).then(res => {
					this.yearData = res.data.data
					if (this.yearData != '') {
						this.isShowThree = true;
					} else {
						this.isShowThree = false;
					}
					uni.hideLoading();
				})


			},
			getTower(items, index, indexs) {
				if (!this.yearData.cdoList[index].BuildingList[indexs].towerData) {
					uni.showLoading({
						title: "加载中"
					})
					this.$request.api.yearPayData({
						room_id: items.room_id,
						years: this.ruleFrom.years,
						type: 3,
						build_district_code: items.build_district_code,
						build_tower_code: items.build_tower_code,
					}).then(resp => {
						console.log(resp)
						if (resp.data.data) {
							this.yearData.cdoList[index].BuildingList[indexs].towerData = resp.data.data
								.BuildingList
							if (this.yearData.cdoList[index].BuildingList[indexs].status) {
								this.yearData.cdoList[index].BuildingList[indexs].status = false
							} else {
								this.yearData.cdoList[index].BuildingList[indexs].status = true
							}
							uni.hideLoading();
						}
					})
				} else {
					if (this.yearData.cdoList[index].BuildingList[indexs].status) {
						this.yearData.cdoList[index].BuildingList[indexs].status = false
					} else {
						this.yearData.cdoList[index].BuildingList[indexs].status = true
					}
				}
			},
			getUnit(items1, indexs1, index, indexs) {
				if (!this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].roomData) {
					uni.showLoading({
						title: "加载中"
					})
					this.$request.api.yearPayData({
						room_id: items1.room_id,
						years: this.ruleFrom.years,
						type: 4,
						build_district_code: items1.build_district_code,
						build_tower_code: items1.build_tower_code,
						room_unit_number: items1.room_unit_number
					}).then(respe => {
						this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].roomData = respe.data
							.data.RoomList
						if (this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3) {
							this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3 = false
						} else {
							this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3 = true
						}
						uni.hideLoading();
						//只能这的写 没什么好办法
						this.yearData.cdoList[index].BuildingList[indexs].status = false
						this.yearData.cdoList[index].BuildingList[indexs].status = true
						//--
					})
				} else {
					if (this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3) {
						this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3 = false
					} else {
						this.yearData.cdoList[index].BuildingList[indexs].towerData[indexs1].status3 = true
					}
				}
				//只能这的写 没什么好办法
				this.yearData.cdoList[index].BuildingList[indexs].status = false
				this.yearData.cdoList[index].BuildingList[indexs].status = true
				//--
			},
			//选择年度
			typeBtn: function(e) {
				this.indexe = e.target.value
				this.ruleFrom.years = this.typaBtne[this.indexe].id
				this.getPayList()
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}

			.box_one {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				color: #999;
				text-align: center;
			}

			.box_onetext {
				color: #333;
				margin-top: 5px;
				font-weight: 550;
			}
		}

		.nav_item {
			.top-logo {
				width: 20px;
				height: 20px;
				border-radius: 3rpx;
				margin-bottom: -5px;
				margin-right: 4px;
			}

			.nav_itemtitle {
				padding: 10px 20px;
				color: #007000;
				font-size: 36rpx;
				border-radius: 9px;
			}

			.nav_itemBox {
				background: #fff;
				width: 93%;
				margin: 0 auto;
				border-radius: 9px;
			}

			.nav_itemBuilding {
				padding: 13px 20px;
				border-bottom: 1px solid #f4f4f4;
				display: flex;
				justify-content: space-between
			}

			.nav_itemBuilding .image {
				width: 15px;
				height: 15px;
			}

			.unit {
				color: #666666FF;
				padding: 10px 20px;
				border-bottom: 1px solid #f4f4f4;
				margin-left: 10px;
				display: flex;
				justify-content: space-between
			}

			.unit .image {
				width: 15px;
				height: 15px;
			}

			.unit_image {
				width: 16px;
				height: 9px;
				margin-top: 5px;
			}

			.from_box {
				width: 90%;
				margin: 10px auto;
				background: #f4f4f4;
				border-radius: 5px;
			}

			.from_boxtelete {
				padding: 10px 20px;
			}

			.tab {
				width: 91%;
				margin: 10px auto;
				background: #f4f4f4;
			}

			.tab_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #999;
				color: #CCCCCC;
				font-size: 12px;
			}

			.tab_box1 {
				display: flex;
				justify-content: space-between;
				padding: 5px 10px;
				border-bottom: 1px solid #999;
				color: #CCCCCC;
				background: #fff;
				font-size: 12px;
			}
		}
	}

	.form-select {
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png) no-repeat center right;
		background-size: 22rpx 22rpx;
	}

	.form-selectDown {
		width: 160rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png) no-repeat center right;
		background-size: 22rpx 22rpx;
	}

	.form-selectUp {
		width: 160rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/up.png) no-repeat center right;
		background-size: 22rpx 22rpx;
	}

	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

	}

	.modal-cont {
		width: 610rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-bottom: 24px;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.imageBack {
		height: 300px;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/aa09988ddb6a5c95abaee1dfd9a15f4.png) no-repeat;
		margin-top: -199px;
	}

	.wyfBalance {
		border: 1px solid #60B200;
		height: 123px;
		width: 86%;
		margin: 0px auto;
		margin-top: -41px;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 9px;
	}
	.image_Tow {
		width: 266px;
		height: 286px;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/104b20cbf76c10f2752a9c90f00bd77.png) no-repeat;
		margin: -19px auto;
	}
	.meeting-btn {
		width: 350rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FFFFFF;
		border-radius: 22px;
		border: 1px solid #427705;
		text-align: center;
		color: #427705;
		margin: 0 auto;
	}
</style>